<template>
  <n-form :label-width="80" ref="formRef">
    <n-space class="center-picker-container">
      <n-form-item style="" label="选择查询时间" label-width="80">
        <n-date-picker v-model:value="timestamp" type="date"/>
        <n-button @click="handle">确定</n-button>
      </n-form-item>
    </n-space>
  </n-form>
  <div class="console">
    <div ref="chartRef" style="width: 1500px; height: 500px;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getHang } from '@/api/dataInfo/flightInfo';

const chartRef = ref<HTMLElement | null>(null);
const airlineData = ref<Array<{ corCn: string; count: string }>>([]);
const timestamp = ref(1496246400000);

async function fetchData() {
  const response = await getHang(timestamp.value);
  airlineData.value = response.data;

  // 获取新数据后，重新设置图表数据
  const chart = echarts.init(chartRef.value as HTMLDivElement);
  const option = {
    title: {
      text: '航司数量分布',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      bottom: 10,
      data: airlineData.value.map((item) => item.corCn),
      type: 'scroll',
      width: '80%',
      itemWidth: 20,
      itemHeight: 16,
      textStyle: {
        fontSize: 12,
      },
    },
    series: [
      {
        name: '航司数量',
        type: 'pie',
        radius: '80%',
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: airlineData.value.map((item) => ({
          value: parseInt(item.count),
          name: item.corCn,
        })),
      },
    ],
  };

  chart.setOption(option);
}

async function handle() {
  await fetchData();
}

onMounted(fetchData);
</script>
